<template>
    <div class="info-head">
        <el-form :inline="true" class="head-form" ref="form" :model="form" :rules="rules">
            <el-form-item label="检索" prop="bah">
                <el-input placeholder="请输入病案号" clearable @keyup.enter.native="searchData()" v-model="form.bah" class="head-input-search"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchData()">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="operate-box">
            <div class="sign">
                <p><span></span>强制</p>
                <p><span></span>疑似</p>
            </div>
            <div class="pagination-btn">
                <el-button
                    :disabled="infoData.index === 1 || infoData.PrevId === ''"
                    class="pre"
                    type="info"
                    icon="el-icon-arrow-left"
                    @click="seachPackageId('pre')">
                </el-button>
                <span>{{infoData.index || 1}}&nbsp;</span><span>/&nbsp;{{infoData.count || 1}}</span>
                <el-button
                    :disabled="infoData.index === infoData.count || infoData.NextId === ''"
                    class="next"
                    type="info"
                    icon="el-icon-arrow-right"
                    @click="seachPackageId('next')">
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'InfoHead',
        props: ['infoData'],
        model: {
            prop: 'infoData',
            event: 'changeInfoData'
        },
        data () {
            return {
                // 病案号搜索
                form: {
                    bah: ''
                },
                rules: {
                    bah: [
                        {required: false, message: '请输入病案号', trigger: 'blur'}
                    ]
                }
            }
        },
        created () {
        },
        methods: {
            /**
             * 搜索病案号
             */
            searchData () {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$emit('searchData', this.form.bah)
                    } else {
                        return false
                    }
                })
            },
            /**
             * 查询指定id数据
             */
            seachPackageId (type) {
                if (type === 'next') {
                    this.setGetStore(this.$route.name, {pageIndex: this.infoData.index + 1})
                } else if (type === 'pre') {
                    this.setGetStore(this.$route.name, {pageIndex: this.infoData.index - 1})
                }
                this.$emit('getData')
            }
        },
        components: {
        }
    }
</script>

<style scoped lang="scss">
    .info-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
        .head-form {
            .el-form-item {
                margin-bottom: 0;
                .head-input-search {
                    width: 160px;
                }
            }
        }
        .operate-box {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .sign {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                p {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin: 0 10px 0 0;
                    color: #e21f06;
                    span {
                        display: block;
                        width: 12px;
                        height: 12px;
                        border-radius: 2px;
                        margin-right: 4px;
                        background: #e21f06;
                    }
                    &:nth-child(2) {
                        color: #ec7534;
                        span {
                            background: #ec7534;
                        }
                    }
                }
            }
            .pagination-btn {
                font-size: 14px;
                button {
                    width: 28px;
                    height: 28px;
                    font-size: 14px;
                    margin-right: 6px;
                    padding: 0;
                    &:last-child {
                        margin-left: 6px;
                        margin-right: 0;
                    }
                }
                & > span {
                    font-size: 16px;
                    &:nth-of-type(1) {
                        color: #409eff;
                    }
                }
            }
        }
    }
    .pag-span {
        .time {
            margin: 0 0 4px;
            color: #409eff;
            font-size: 14px;
        }
        .user {
            margin: 0;
            font-size: 14px;
        }
    }
</style>
